```svelte {11-14}
<script lang="ts">
  import * as colorPicker from "@zag-js/color-picker"
  import { normalizeProps, useMachine } from "@zag-js/svelte"

  const id = $props.id()
  const service = useMachine(colorPicker.machine, {
    id,
    defaultValue: colorPicker.parse("hsl(0, 100%, 50%)"),
  })
  const api = $derived(colorPicker.connect(service, normalizeProps))
</script>

<div {...api.getRootProps()}>
  <div>
    <div {...api.getTransparencyGridProps({ size: "4px" })}></div>
    <div {...api.getSwatchProps({ value: api.value })}></div>
  </div>
  <!-- ... -->
</div>
```
